<template>
	<view class="MessageBody">
		<tab :list="List" :tabIndex="tabIndex" @tab="tab"></tab>
		<!-- 聊天 -->
		<scroll-view scroll-y="true" class="scroll" v-show="activeIndex == 0">
			<view v-for="(item,index) in boss" :key="index" class="messageCard"
				@click="toTaik(item.bossId,item.bossName)">
				<image :src="item.bossImage" mode="aspectFill"></image>
				<view class="name">{{item.bossName}}</view>
				<view class="lastMessage">{{item.lastMessage}}</view>
				<view class="lastTime">{{item.lastTime}}</view>
				<view class="trash" @click="deleteBoss(item.bossId)">
					<uni-icons type="trash" size="24"></uni-icons>
				</view>
			</view>
			<view v-if="$store.state.noneMessage" style="height: 79vh;display: flex;align-items: center;">
				<view class="" style="margin: 0 auto;font-size: 18px;color: #00b4b3;">
					当前还没有消息哦！
				</view>
			</view>
		</scroll-view>
		<!-- 附近的人 -->
		<scroll-view scroll-y="true" class="scroll" v-show="activeIndex == 1">
			<!-- <text>附近的人</text> -->
			<view v-for="(item,index) in UserList" :key="index" class="messageCard"
				@click="toChatOther(item._id,item.username,item.cover)">
				<image :src="item.cover" mode="aspectFill"></image>
				<view class="name">{{item.username}}</view>
				<view class="lastMessage" style="font-size: 14px;">这个人很懒,什么都没有留下</view>
				<view class="lastTime">{{item.lastTime}}</view>
<!-- 				<view class="trash" @click="deleteBoss(item.bossId)">
					<uni-icons type="trash" size="24"></uni-icons>
				</view> -->
			</view>
		</scroll-view>
		<!-- offer小助手 -->
		<scroll-view scroll-y="true" class="scroll" v-show="activeIndex == 2">
			<!-- <text>offer小助手</text> -->
			<view class="messageCard" @click="toSpark">
				<image :src="Spark.cover" mode="aspectFill"></image>
				<view class="name">{{Spark.name}}</view>
				<view class="lastMessage">{{Spark.lastMessage}}</view>
				<view class="lastTime">{{Spark.lastTime}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				List: [{
					name: '聊天'
				}, {
					name: '附近的人'
				}, {
					name: 'offer小助手'
				}],
				Spark: {},
				boss: [],
				UserList:[],
				isDeleting: false,
				tabIndex: 0,
				activeIndex: 0
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				this.$u.route('pages/login/login')
			}
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: '#00b4b3'
			});
			this.boss = this.$store.state.Boss
			this.Spark = this.$store.state.Spark
			this.get_user();
			console.log("this.UserList")
			console.log(this.UserList)
			if (this.boss.length > 0 && this.$store.state.noneMessage) {
				this.$store.state.noneMessage = !this.$store.state.noneMessage
			}


		},
		watch: {
			// isDeleting(oldVal, newVal) {
			// 	console.log("oldVal-isDeleting:" + oldVal)
			// 	console.log("newVal-isDeleting:" + newVal)
			// }
		},
		methods: {
			toTaik(_id, interviewer = '') {
				if (!this.isDeleting) {
					this.$u.route('pages/chat/chat', {
						id: _id,
						boss: interviewer
					})
				}
				this.isDeleting = false
			},
			toChatOther(_id, username = '',cover=''){
				this.$u.route('pages/chatOther/chatOther', {
					id: _id,
					username: username,
					cover: cover
				})
			},
			toSpark(){
				this.$u.route('pages/spark/spark')
			},
			deleteBoss(id) {
				console.log(id)
				this.isDeleting = true;
				for (let i = 0; i < this.$store.state.Boss.length; i++) {
					if (this.$store.state.Boss[i].bossId === id) {
						this.$store.state.Boss.splice(i, 1);
						break;
					}
				}
				uni.showToast({
					title: '已把对象从聊天记录移除...',
					icon: 'none',
				});
				if (this.boss.length === 0 && !this.$store.state.noneMessage) {
					this.$store.state.noneMessage = !this.$store.state.noneMessage
				}
			},
			tab({
				index
			}) {
				this.activeIndex = index;
			},
			get_user(){
				this.$api.get_user({
					name: 'get_user'
				}).then((res) => {
					for(let i=0;i<res.data.length;i++){
						if(res.data[i]._id!=this.$store.state.user._id){
							// console.log("res.data[i]")
							// console.log(res.data[i])
							// console.log("this.$store.state.user._id")
							// console.log(this.$store.state.user._id)
							this.UserList.push(res.data[i])
						}
						
					}
					console.log("this.UserList")
					console.log(this.UserList)
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background: gainsboro;
		position: absolute;
	}

	.scroll {
		position: absolute;
		width: 100%;
		height: 92%;
		// padding: 10px;
		background: gainsboro;

		.messageCard {
			height: 92px;
			display: flex;
			flex-direction: row;
			margin: 0 10px;
			margin-bottom: 2px;
			border-radius: 16px;
			background: $boss-base-color;

			image {
				flex-shrink: 0;
				border-radius: 50%;
				overflow: hidden;
				width: 70px;
				height: 70px;
				margin: auto 5px;
			}

			.name {
				font-size: 24px;
				width: 380%;
				height: 45%;
				margin: 14px 0px 0px 9px;
			}

			.lastMessage {
				position: absolute;
				left: 99px;
				margin-top: 55px;
				// // bottom: -4%;
				font-size: 18px;
			}

			.lastTime {
				position: relative;
				width: 100%;
				top: 12px;
				text-align: right;
				margin-right: 20px;
				height: 30px;
			}

			.trash {
				position: absolute;
				right: 2%;
				margin-top: 54px;
				width: 36px;
				height: 36px;
				z-index: 99;
			}
		}
	}
</style>